<template>
  <div class="img-scissor-popup">
    <div class="handle-item">
      <span>裁剪类型：</span>
      <el-radio-group v-model="imgType">
        <el-radio label="jpeg">jpeg</el-radio>
        <el-radio label="png">png</el-radio>
      </el-radio-group>
    </div>

    <div class="content">
      <div class="scissor">
        <img class="scissor-img" ref="imgRef" :src="url" />
      </div>

      <div class="scissor-preview">
        <img class="scissor-preview-img" :src="cropperImgUrl" />
      </div>
    </div>

    <div class="dialog-footer">
      <el-button plain @click="handleCancel"> 取 消 </el-button>
      <el-button type="primary" @click="handleConfirm"> 确 定 </el-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

import { useDebounceFn } from '@vueuse/core';

import { fileFormBase64 } from '@/utils/tools.js';

// modal,pinia
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

const emit = defineEmits(['on-close', 'on-end']);

const props = defineProps({
  url: {
    type: String,
    default: '',
  },
});

const imgType = ref('jpeg');

const imgRef = ref();

const cropper = ref();

const cropperFile = ref();

const cropperImgUrl = ref('');

const handleCancel = () => {
  emit('on-close');
  modalStore.closeModal('img-scissor-popup');
};

const handleConfirm = () => {
  emit('on-end', { url: cropperImgUrl.value, file: cropperFile.value });
  modalStore.closeModal('img-scissor-popup');
};

onMounted(() => {
  cropper.value = new Cropper(imgRef.value, {
    guides: true, // 是否显示虚拟网格线
    viewMode: 1, // 不允许超出图片边界
    aspectRatio: 5 / 4, // 裁剪图片的宽高比例
    autoCropArea: 1,
    crop: useDebounceFn((event) => {
      console.log(event);
      console.log(event.target);
      console.log(event.detail.x);
      console.log(event.detail.y);
      console.log(event.detail.width);
      console.log(event.detail.height);
      console.log(event.detail.rotate);
      console.log(event.detail.scaleX);
      console.log(event.detail.scaleY);
      // emit('on-crop', 'event');

      const data = cropper.value.getCroppedCanvas();

      console.log(data, 'data--');

      data.toBlob(async (blob) => {
        console.log(blob, 'blob-----------');

        cropperFile.value = new File([blob], `${Date.now()}.${imgType.value}`, {
          type: `image/${imgType.value}`,
        });
        cropperImgUrl.value = await fileFormBase64(cropperFile.value);

        console.log(cropperFile.value, ' cropperFile.value ');
      }, `image/${imgType.value}`);
    }, 300),
  });
  console.log(cropper, 'cropper');
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: auto;
  display: flex;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.scissor {
  width: 50%;
  height: auto;
  aspect-ratio: 1/1;
  flex-shrink: 0;

  .scissor-img {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    background-color: #fff;
  }
}

.scissor-preview {
  width: 50%;
  margin-left: 20px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  .scissor-preview-img {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
  }
}

.handle-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
</style>
